<template>
    <div class="container">
      <div class="sidebar">
        <el-tree :data="raindata" :props="dPs"  @node-click="handleNodeClick" default-expand-all ></el-tree>
      </div>
      <div class="content">
        <!-- activeName -->
        <el-tabs v-model="activeName"  @tab-click="handleClick">
          <!-- <el-button @click="getList"> get</el-button> -->
        
          <el-tab-pane label="降雨总量图" name="first">
            <div class="chart-container">
              <chart v-loading="loading" height="100%" width="100%" :chatData="chatData" :chartRiqi="chartRiqi" />
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="降雨速率图" name="second"></el-tab-pane> -->
          <!-- <el-tab-pane label="刨面内侧点缩略图" name="third"></el-tab-pane> -->
        </el-tabs>
      </div>
      
      
    </div>
  </template>
  
  <script>
  import chart from '../../components/charts/Mix-rain.vue'
  import { getDeviceRainData, listDevice  } from "@/api/screen/device";
  
  export default {
    name: 'graph',
    components: { chart },
    data() {
      return {
        activeName: 'first',
        chatData: [
          150, 230, 224, 218, 135, 147, 262
        ],
        chartRiqi: [
          '2023-11-11', '2023-11-12', '2023-11-13', '2023-11-14', '2023-11-15', '2023-11-16', '2023-11-17'
        ],
        deviceRainDataList: [],
        raindata: [],
        raindata: [{
          label: '嘉能特钢选矿厂',
          defaultExpandAll: true, // 设置子节点展开
              children: [{
                label: '剖面 1-1',
                defaultExpandAll: true, // 设置子节点展开
                children: [{
                  label: 'R1'
                },
                {
                  label: 'R2'
                }]
              },
              {
                label: '剖面 2-2',
                defaultExpandAll: true, // 设置子节点展开
                children: [{
                  label: 'R3'
                },
                {
                  label: 'R4'
                }]
              }
            ]}],
            
          activeName: 'first',
          chatData: [
            150, 230, 224, 218, 135, 147, 280
          ],
          deviceList: [],
          defaultProps: {
            children: 'children',
            label: 'label'
          },
          elTreeData: [],
          raindata: [],
          loading: true,
        }
    },
    computed: {
      dPs() {
        return {
          children: 'children',
          label: 'label'
        };
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      },
       /** 查询设备列表 */
      getList() {
        this.loading = true;
        listDevice({monitorDeviceName:'雨量'}).then(response => {
          console.log('deviceList',response.rows) 
          this.deviceList = response.rows
          this.convertToElTree()
          console.log('this.deviceList', this.deviceList)
          // monitordevicecode 所属监测点
          // monitordevicename 设备类型
          // deviceid  设备id
          this.total = response.total;
          this.loading = false;
          }
        );
      },
      /** 查询降雨量设备数据详情 */
      getDeviceRainData(e) {
        this.loading = true;
        getDeviceRainData({deviceId:e, pageSize:10000}).then(response => {
          console.log('deviceRainDataList',response.rows) 
          this.loading = false
          let resList = response.rows
          this.deviceRainDataList = resList.reverse()
          this.chartRiqi = this.deviceRainDataList.map(item=> {return item.createTime})
          this.chatData = this.deviceRainDataList.map(item=> {return item.tag})
          console.log('this.chatData', this.chatData, this.chartRiqi)
          }
        );
      },
      handleNodeClick(raindata) {
        console.log(raindata, raindata.id);
        this.getDeviceRainData(raindata.id)
      },
      convertToElTree(e = this.deviceList) {
          const tempMap = new Map(); // 临时 Map 用于合并相同项
          // 遍历设备列表
          e.forEach(device => {
            if (tempMap.has(device.monitorDeviceCode) || tempMap.has(device.monitorDeviceName)) {
               // 如果存在相同设备名称的项，则合并
               const existingDevice = tempMap.get(device.monitorDeviceCode);
              //  const existingMonitordevicename = tempMap.get(device.monitordevicename);
               existingDevice.children.push({ id: device.deviceId, label: device.deviceName });
            } else {
               // 如果不存在相同设备名称的项，则创建新节点
               tempMap.set(device.monitorDeviceCode, {
                label: device.monitorDeviceCode,
                children: [{ id: device.deviceId, label: device.deviceName  }]
              });
              // 如果不存在相同设备名称的项，则创建新节点
              
            }
          });
          
          // 将 Map 转换为数组，存储到 elTreeData 中
          this.elTreeData = Array.from(tempMap.values());

          this.raindata = this.elTreeData
          console.log('this.elTreeData', this.elTreeData)
        }
    }
  }
  </script>
  
  <style scoped>
  
.container {
    display: flex;
  }

    
  .sidebar {
    width: 200px; /* Adjust the width as per your layout */
    height: 100vh;
  }
  
  .content {
    flex: 1;
    height: 100vh;
  }
  

  .chart-container{
  position: relative;
  width: 100%;
  height: 80vh;
}


  </style>